<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Declare page as mobile friendly --> 
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>
<!-- Declare page as iDevice WebApp friendly -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- iDevice WebApp Splash Screen, Regular Icon, iPhone, iPad, iPod Retina Icons -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash/splash-icon.png"> 
<!-- iPhone 3, 3Gs -->
<link rel="apple-touch-startup-image" href="images/splash/splash-screen.png" 			media="screen and (max-device-width: 320px)" /> 
<!-- iPhone 4 -->
<link rel="apple-touch-startup-image" href="images/splash/splash-screen@2x.png" 		media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" /> 
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash/splash-screen@3x.png" />

<!-- Page Title -->
<title>Metfind movil</title>

<!-- Stylesheet Load -->
<link href="styles/style.css"				rel="stylesheet" type="text/css">
<link href="styles/framework-style.css" 	rel="stylesheet" type="text/css">
<link href="styles/framework.css" 			rel="stylesheet" type="text/css">
<link href="styles/bxslider.css"			rel="stylesheet" type="text/css">
<link href="styles/swipebox.css"			rel="stylesheet" type="text/css">
<link href="styles/icons.css"				rel="stylesheet" type="text/css">
<link href="styles/ui-lightness/jquery-ui-1.9.2.custom.css"				rel="stylesheet" type="text/css">
<link href="styles/retina.css" 				rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />


<!--Page Scripts Load -->
<script src="scripts/jquery.min.js"		 type="text/javascript"></script>	
<script src="scripts/snap.js"			 type="text/javascript"></script>
<script src="scripts/hammer.js"			 type="text/javascript"></script>	

<script src="scripts/subscribe.js"		 type="text/javascript"></script>
<script src="scripts/contact.js"		 type="text/javascript"></script>
<script src="scripts/jquery.swipebox.js" type="text/javascript"></script>
<script src="scripts/bxslider.js"		 type="text/javascript"></script>
<script src="scripts/colorbox.js"		 type="text/javascript"></script>
<script src="scripts/retina.js"			 type="text/javascript"></script>
<script src="scripts/custom.js"			 type="text/javascript"></script>
<script src="scripts/framework.js"		 type="text/javascript"></script>
<script src="scripts/jquery-ui.js"   type="text/javascript"></script>
<script src="scripts/jqueryuitp.js"   type="text/javascript"></script>
<script type="text/javascript">
	function rdy() 
	{
		$( "#accordion" ).accordion
		({
			collapsible: true,
			animate:false,
			active:false,
		});
		$("#slider1").slider(
				{
					min:-150,
					max:150,
					slide: function( event, ui ) 
					{
						var r=230;
						var g=230;
						var b=230;
						
						if(ui.value>0)
						{
							r=r-ui.value;
							b=b-ui.value;
							$( "#slider1" ).css('background', 'rgb('+r+','+g+','+b+')');
							//$( "#comentar1" ).css('background', 'rgb('+r+','+g+','+b+')');
							
							var opa=0.5+(ui.value/150.0)/2.0;	
							$("#happy1").css({ opacity: opa });
							$("#angry1").css({ opacity: 1-opa });
						}
						else
						{
							g=g+ui.value;
							b=b+ui.value;
							$( "#slider1" ).css('background', 'rgb('+r+','+g+','+b+')');
							//$( "#comentar1" ).css('background', 'rgb('+r+','+g+','+b+')');
							
							var opa=0.5-(ui.value/150.0)/2.0;
							$("#angry1").css({ opacity: opa });
							$("#happy1").css({ opacity: 1-opa });
						}
						
						
						
						
					}
				})
				$( "#slider1" ).css('background', 'rgb(230,230,230)');
				$("#angry1").css({ opacity: 0.5 });
				$("#happy1").css({ opacity: 0.5 });
				
				
				$("#slider2").slider(
						{
							min:-150,
							max:150,
							slide: function( event, ui ) 
							{
								var r=230;
								var g=230;
								var b=230;
								
								if(ui.value>0)
								{
									r=r-ui.value;
									b=b-ui.value;
									$( "#slider2" ).css('background', 'rgb('+r+','+g+','+b+')');
									var opa=1-ui.value/150.0;
									
									var opa=0.5+(ui.value/150.0)/2.0;	
									$("#happy2").css({ opacity: opa });
									$("#angry2").css({ opacity: 1-opa });
								}
								else
								{
									g=g+ui.value;
									b=b+ui.value;
									$( "#slider2" ).css('background', 'rgb('+r+','+g+','+b+')');

									var opa=0.5-(ui.value/150.0)/2.0;
									$("#angry2").css({ opacity: opa });
									$("#happy2").css({ opacity: 1-opa });
								}
								
								
								
								
							}
						})
						$( "#slider2" ).css('background', 'rgb(230,230,230)');
				$("#angry2").css({ opacity: 0.5 });
				$("#happy2").css({ opacity: 0.5 });
				
				
				$("#slider3").slider(
						{
							min:-150,
							max:150,
							slide: function( event, ui ) 
							{
								var r=230;
								var g=230;
								var b=230;
								
								if(ui.value>0)
								{
									r=r-ui.value;
									b=b-ui.value;
									$( "#slider3" ).css('background', 'rgb('+r+','+g+','+b+')');
									
									var opa=0.5+(ui.value/150.0)/2.0;	
									$("#happy3").css({ opacity: opa });
									$("#angry3").css({ opacity: 1-opa });
								}
								else
								{
									g=g+ui.value;
									b=b+ui.value;
									$( "#slider3" ).css('background', 'rgb('+r+','+g+','+b+')');

									var opa=0.5-(ui.value/150.0)/2.0;
									$("#angry3").css({ opacity: opa });
									$("#happy3").css({ opacity: 1-opa });
								}
								
								
								
								
							}
						})
						$( "#slider3" ).css('background', 'rgb(230,230,230)');
				$("#angry3").css({ opacity: 0.5 });
				$("#happy3").css({ opacity: 0.5 });
				
				
				
				$("#slider4").slider(
						{
							min:-150,
							max:150,
							slide: function( event, ui ) 
							{
								var r=230;
								var g=230;
								var b=230;
								
								if(ui.value>0)
								{
									r=r-ui.value;
									b=b-ui.value;
									$( "#slider4" ).css('background', 'rgb('+r+','+g+','+b+')');
									
									var opa=0.5+(ui.value/150.0)/2.0;	
									$("#happy4").css({ opacity: opa });
									$("#angry4").css({ opacity: 1-opa });
								}
								else
								{
									g=g+ui.value;
									b=b+ui.value;
									$( "#slider4" ).css('background', 'rgb('+r+','+g+','+b+')');

									var opa=0.5-(ui.value/150.0)/2.0;
									$("#angry4").css({ opacity: opa });
									$("#happy4").css({ opacity: 1-opa });
								}
								
								
								
								
							}
						})
						$( "#slider4" ).css('background', 'rgb(230,230,230)');
				$("#angry4").css({ opacity: 0.5 });
				$("#happy4").css({ opacity: 0.5 });
	}

</script>
</head>
<body onload="rdy()">
<div id="dialog"></div>
<div id="preloader">
	<div id="status">
    	<p class="center-text">
			Cargando contenido...
            <em>Esto depende de tu conexion a internet!</em>
        </p>
    </div>
</div>

	<div class="header">
    	<img class="logo" alt="img" src="images/logo1.png" width="150">
   		<div class="social-icons">
        	<a href="https://www.facebook.com/metfind" class="facebook-icon"></a>
            <a href="https://twitter.com/Metfind" class="twitter-icon"></a>
            
        </div> 
        
    </div>

	<div class="content" style="hight:6000px"> 
    	
    	
    <div class="decoration"></div>
    	
    	<!-- 
    	
    	
    	
    	 -->
        
<div id="accordion">
	<h3 style="float:left;width:100%"><img alt="" src="images/gallery/thumb/1t.jpg" width="50px" style="font-size:5px;float:left;"> <div style="padding-left:8px;height:50px;padding-top:25px">Juan Albornoz C.</div></h3>
		<div >
		<p></p>
			<div style="height:190px">
			
    		
	    		<div id="angry1" style="width:20%;min-width:45px;float:left"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/angry.png"/></div>
	    		<div style="width:60%;float:left">  <div id="slider1"></div></div>
	    		<div id="happy1" style="width:20%;min-width:45px;float:left;height:57px"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/happy.png"/></div>
				
				
					<h4 style="margin:0 auto;width:90%;"" class="center-text"><br>Comentario</h4>
					<textarea  style="margin:0 auto;width:90%;height:100px;color:black;border-radius:5px 5px 5px 5px;font-size:11px"></textarea>
				
    		</div>
    		
    		
    		
		</div>
	<h3 style="float:left;width:100%"><img alt="" src="images/gallery/thumb/1t.jpg" width="50px" style="font-size:5px;float:left;"> <div style="padding-left:8px;height:50px;padding-top:25px">Tomas Cabrera E.</div></h3>
		<div>
			<div style="">
	    		<p></p>
	    		
	    		<div id="angry2" style="width:20%;min-width:45px;float:left"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/angry.png"/></div>
	    		<div style="width:60%;float:left"><div id="slider2"></div></div>
	    		<div id="happy2" style="width:20%;min-width:45px;float:left;height:57px"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/happy.png"/></div>
				
				
					<h4 style="margin:0 auto;width:90%;"" class="center-text"><br>Comentario</h4>
					<textarea  style="margin:0 auto;width:90%;height:100px;color:black;border-radius:5px 5px 5px 5px;font-size:11px"></textarea>
	    	</div>
		</div>
	<h3 style="float:left;width:100%"><img alt="" src="images/gallery/thumb/1t.jpg" width="50px" style="font-size:5px;float:left;"> <div style="padding-left:8px;height:50px;padding-top:25px">María Hermosilla B.</div></h3>
		<div>
		<div style="">
    		<p></p>
    		
    		<div id="angry3" style="width:20%;min-width:45px;float:left"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/angry.png"/></div>
    		<div style="width:60%;float:left"><div id="slider3"></div></div>
    		<div id="happy3" style="width:20%;min-width:45px;float:left;height:57px"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/happy.png"/></div>
				
				
					<h4 style="margin:0 auto;width:90%;"" class="center-text"><br>Comentario</h4>
					<textarea  style="margin:0 auto;width:90%;height:100px;color:black;border-radius:5px 5px 5px 5px;font-size:11px"></textarea>
    	</div>
    	
		</div>
	<h3 style="float:left;width:100%"><img alt="" src="images/gallery/thumb/1t.jpg" width="50px" style="font-size:5px;float:left;"> <div style="padding-left:8px;height:50px;padding-top:25px">Ana Miranda C.</div></h3>
		<div>
		<div style="">
    		<p></p>
    		
    		<div id="angry4" style="width:20%;min-width:45px;float:left"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/angry.png"/></div>
    		<div style="width:60%;float:left"><div id="slider4"></div></div>
    		<div id="happy4" style="width:20%;min-width:45px;float:left;height:57px"><img width="45px" style="margin-left: auto;margin-right: auto;" src="images/happy.png"/></div>
				
				
					<h4 style="margin:0 auto;width:90%;"" class="center-text"><br>Comentario</h4>
					<textarea  style="margin:0 auto;width:90%;height:100px;color:black;border-radius:5px 5px 5px 5px;font-size:11px"></textarea>
    	</div>
    	
		</div>
</div>

<!-- 
    	
    	
    	
    	 -->
        <p></p>
        <div class="decoration"></div>
        
        <p class="center-text no-bottom copyright-text">Metfind Ltda. Copyright 2013<br> Todos los derechos reservados</p>
        
        
    </div>

	
	<div class="navigation" style="z-index:500;background-color:rgb(252,252,252)">
    	<div class="navigation-wrapper">
            <a href="info.html" class="nav-item informacion-nav"></a>
            <a href="#" class="nav-item empleado-nav-selected"></a>
            <a href="index.html" class="nav-item home-nav"></a>
            <a href="opinar.html" class="nav-item blog-nav"></a>
            <a href="enviar.html" class="nav-item contact-nav center-text" style="padding-top:22px;padding-left:9px;color:black">Enviar</a>
        </div>
    </div>
	
</body>
</html>


